<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>美食分享平台</title>
    <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/foodshare.css}" rel="stylesheet">
</head>
<style>
    #img{
        width: 200px;
    }
    #title{
        width: 200px;
    }
    #detail{
        width: 500px;
    }
    th{
        text-align: center;
    }
    td{
        text-align: center;
    }
</style>
<body>
<!--引入抽取的topbar-->
<div th:replace="common/topbar::topbar"></div>

<div class="container-fluid">
    <div class="row">
        <!--引入侧边栏-->
        <div th:replace="common/sidebar::sidebar(active='news')"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2><a class="btn btn-sm btn-success" th:href="@{/news/addnews}">新增资讯</a></h2>
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <!-- <thead>定义表格的表头 -->
                    <thead>
                    <tr>
                        <th id="id">#</th>
                        <th id="title">资讯标题</th>
                        <th id="img">图片</th>
                        <th id="detail">资讯内容</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="nw:${news}">
                        <td th:text="${nw.newsId}"></td>
                        <td th:text="${nw.newsTitle}"></td>
                        <td><img height="180" width="200" th:src="${nw.newsImage}" alt=""></td>
                        <td th:text="${nw.newsDetail}"></td>
                        <td>
                            <a class="btn btn-sm btn-primary" th:href="@{/news/list/}+${nw.newsId}">编辑</a>
                            <a class="btn btn-sm btn-danger" th:href="@{/news/delete/}+${nw.newsId}">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <!-- 首页 -->
                    <li class="page-item">
                        <a class="page-link" th:href="'/foodshare/news/list?page=0'">首页</a>
                    </li>
                    <!-- 上一页 -->
                    <li class="page-item" th:if="${news.hasPrevious()}">
                        <a class="page-link" th:href="'/foodshare/news/list?page=' + ${news.previousPageable().getPageNumber()}" th:text="上一页"></a>
                    </li>
                    <!-- 中间页 -->
                    <li class="page-item" th:each="page:${#numbers.sequence(0, news.getTotalPages() - 1)}">
                        <a class="page-link" th:href="'/foodshare/news/list?page=' + ${page}" th:text="${page + 1}" th:if="${page ne news.pageable.getPageNumber()}"></a>
                        <a class="page-link" th:href="'/foodshare/news/list?page=' + ${page}" th:text="${page + 1}" th:if="${page eq news.pageable.getPageNumber()}" th:style="'font-weight:bold;background: #6faed9;'"></a>
                    </li>
                    <!-- 下一页 -->
                    <li class="page-item" th:if="${news.hasNext()}">
                        <a class="page-link" th:href="'/foodshare/news/list?page=' + ${news.nextPageable().getPageNumber()}" th:text="下一页"></a>
                    </li>
                    <!-- 尾页 -->
                    <li class="page-item">
                        <a class="page-link" th:href="'/foodshare/news/list?page=' + ${news.getTotalPages() - 1}">尾页</a>
                    </li>
                </ul>
            </nav>
        </main>
    </div>
</div>
</body>
</html>